<template>
  <div>
    <mescroll-vue ref="mescroll" :down="mescrollDown" :up="mescrollUp" @init="mescrollInit">
      <div class="userOrder">
        <div class="orderContainer">
          <div v-show="orderList.length != 0" v-for="(item, index) in orderList" :key="index" class="orderItem">
            <div class="oid">订单号：{{ item.oid }}</div>
            <div v-for="(it, id) in item.product" :key="id" class="omsg">
              <div class="leftImg">
                <img :src="$fnc.getImgUrl(it.piclink)" alt="" />
              </div>
              <div class="rightData">
                <div class="goodTitle">
                  {{ it.title | limitText }}
                </div>
                <div class="otherMsg">
                  <div class="price">
                    <small>¥</small>{{ $fnc.toFixedZ(it.price, 2) }}
                  </div>
                  <div @click="copyLink(it.pid)" class="btns">
                    <i class="el-icon-copy-document"></i> 复制链接
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="noneData" v-show="orderList.length == 0">
          <img src="@/assets/img/empty.png" alt="" />
          <span>该用户无订单数据~</span>
        </div>
      </div>
    </mescroll-vue>
  </div>
</template>

<script>
import MescrollVue from "mescroll.js/mescroll.vue"; //下拉组件
import { mapState } from "vuex";

export default {
  components: {
    MescrollVue,
  },
  props: {
    isSupplier: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      mescroll: null, // mescroll实例对象
      mescrollDown: {
        mustToTop: true,
      }, //下拉刷新的配置. (如果下拉刷新和上拉加载处理的逻辑是一样的,则mescrollDown可不用写了)
      mescrollUp: {
        // 上拉加载的配置.
        callback: this.upCallback, // 上拉回调,此处简写; 相当于 callback: function(page, mescroll) { }
        //以下是一些常用的配置,当然不写也可以的.
        page: {
          num: 0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
          size: 10, //每页数据条数,默认10
        },
        htmlNodata: '<p class="upwarp-nodata">-- END --</p>',
        noMoreSize: 1, //如果列表已无数据,可设置列表的总数量要大于5才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看这就是为什么无更多数据有时候不显示的原因
        // toTop: {
        //   //回到顶部按钮
        //   src: "./static/mescroll/mescroll-totop.png", //图片路径,默认null,支持网络图
        //   offset: 1000, //列表滚动1000px才显示回到顶部按钮
        // },
        empty: {
          //列表第一页无任何数据时,显示的空提示布局; 需配置warpId才显示
          warpId: "", //父布局的id (1.3.5版本支持传入dom元素)
          icon: "./static/mescroll/mescroll-empty.png", //图标,默认null,支持网络图
          tip: "暂无相关数据~", //提示
        },
      },
      orderList: [], // 足迹
    };
  },
  computed: {
    ...mapState({
      chat_userinfo: (state) => state.conversation.chat_userinfo,
      mobileWebSite: (state) => state.mobileWebSite,
    }),
  },
  filters: {
    limitText(val) {
      if (val.length > 23) {
        return val.slice(0, 23) + "...";
      } else {
        return val;
      }
    },
  },
  watch: {
    chat_userinfo() {
      this.mescroll.resetUpScroll();
    },
  },
  beforeRouteEnter(to, from, next) {
    // 如果没有配置回到顶部按钮或isBounce,则beforeRouteEnter不用写
    next((vm) => {
      // 找到当前mescroll的ref,调用子组件mescroll-vue的beforeRouteEnter方法
      vm.$refs.mescroll && vm.$refs.mescroll.beforeRouteEnter(); // 进入路由时,滚动到原来的列表位置,恢复回到顶部按钮和isBounce的配置
      // 进入路由时,滚动到原来的列表位置,恢复回到顶部按钮和isBounce的配置
    });
  },
  beforeRouteLeave(to, from, next) {
    // 如果没有配置回到顶部按钮或isBounce,则beforeRouteLeave不用写
    // 找到当前mescroll的ref,调用子组件mescroll-vue的beforeRouteLeave方法
    this.$refs.mescroll && this.$refs.mescroll.beforeRouteLeave(); // 退出路由时,记录列表滚动的位置,隐藏回到顶部按钮和isBounce的配置
    // 退出路由时,记录列表滚动的位置,隐藏回到顶部按钮和isBounce的配置
    next();
  },
  methods: {
    copyLink(id) {
      let url = `${this.mobileWebSite}pages/shop/shopdetail/shopdetail?id=${id}`;
      let oInput = document.createElement("input");
      oInput.value = url;
      document.body.appendChild(oInput);
      oInput.select();
      document.execCommand("Copy");
      oInput.className = "oInput";
      oInput.style.display = "none";
      this.$fnc.alertSuccess("复制成功");
    },
    mescrollInit(mescroll) {
      this.mescroll = mescroll; // 如果this.mescroll对象没有使用到,则mescrollInit可以不用配置
    },

    upCallback(page, mescroll) {
      let params = {
        page: page.num,
        username: this.chat_userinfo.username,
      };
      if (this.isSupplier) {
        params.is_supplier = 1;
      }
      this.$api.getUser.getOrderList(params).then((res) => {
        if (res.data.code == 200) {
          let arr = res.data.result.data;
          // 如果是第一页需手动置空列表
          if (page.num === 1) this.orderList = [];
          // 下拉刷新
          // 把请求到的数据添加到列表
          this.orderList = this.orderList.concat(arr);
          // 数据渲染成功后,隐藏下拉刷新的状态
          this.$nextTick(() => {
            mescroll.endSuccess(arr.length);
          });
        } else {
          mescroll.endErr();
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.userOrder {
  height: 100%;
}
.orderContainer {
  width: 95%;
  margin: 0 auto;
  text-align: left;
  background-color: rgb(249, 250, 251);
  border-radius: 10px;
  margin-top: 10px;
  .orderItem {
    background-color: #fff;
    border-radius: 5px;
    padding: 5px 10px;
    margin-bottom: 10px;
    box-shadow: 0 0 10px #ccc;
    .oid {
      width: 100%;
      border-bottom: 1px solid rgb(242, 242, 242);
      padding-bottom: 5px;
      color: rgb(155, 155, 155);
      font-size: 14px;
    }
    .omsg {
      padding-top: 5px;
      display: flex;
      width: 100%;
      margin: 5px 0;
      .leftImg {
        max-width: 60px;
        min-width: 60px;
        height: 60px;
        border-radius: 5px;
        overflow: hidden;
        > img {
          width: 100%;
          height: 100%;
        }
      }
      .rightData {
        padding-left: 10px;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .goodTitle {
          color: rgb(94, 94, 94);
          font-size: 14px;
        }
        .otherMsg {
          display: flex;
          width: 100%;
          align-items: center;
          margin-top: 5px;
          justify-content: space-between;
          .price {
            color: rgb(255, 90, 0);
          }
          .btns {
            color: #fff;
            cursor: pointer;
            background-color: rgb(64, 158, 255);
            padding: 2px 10px;
            border-radius: 15px;
            font-size: 12px;
          }
        }
      }
    }
  }
}

.noneData {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #999;
}
</style>